<template>
    <div class="oder_box">
      <leftnav></leftnav>
      <div class="content_box">
        <div class="top_nav">
          <topnav></topnav>
        </div>
        <div class="content">
          <div class="header_dingDan">订单列表</div>
          <div class="content_itembox">
            <div class="content_itps">
              <div class="content_itps_tit">订单编号</div>
              <div class="content_itps_tit2">订单状态</div>
              <div class="content_itps_tit2">订单日期</div>
              <div class="content_itps_tit2">订单金额</div>
              <div class="content_itps_tit2">操作</div>
            </div>
            <div class="content_item" v-for="item in oderarr">
              <div class="content_itemtit">{{item.order_number}}</div>
              <div class="content_itemtit2">
                <span v-if="item.order_status==1">待支付</span>
                <span v-if="item.order_status==2">代发货</span>
                <span v-if="item.order_status==3">待收货</span>
                <span v-if="item.order_status==4">已完成</span>
                <span v-if="item.order_status==5">已关闭</span>
              </div>
              <div class="content_itemtit2">{{item.order_time}}</div>
              <div class="content_itemtit2">{{item.order_total_money}}</div>
              <div class="content_itemtit2">
                <div class="xiangQing" @click="xiangQingfn(item)">详情</div>
              </div>
            </div>
          </div>
          <div class="oder_fenye">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="1">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import Topnav from "../../../components/nav/topnav";
    import Leftnav from "../../../components/nav/leftnav";
    export default {
        name: "oder",
      components: {Leftnav, Topnav},
      data () {
        return {
          nowpage:0,
          oderarr:[],
        }
      },
      methods:{
        getOder() {
          let _this = this
          $.ajax({
            url:this.apis+'/admin/Order/orderList',
            data:{
              page:this.nowpage,
            },
            type:'POST',
            headers:{
              'token':localStorage.getItem('token')
            },
            success:function (res) {
              _this.oderarr = res.data.data
            }
          })
        },
        xiangQingfn(item) {
          this.$router.push({path:'/oder_details',query:{id:item.id}})
        },

      },
      created() {
          this.getOder()
          // this.
      },
    }
</script>

<style scoped lang="less">
  .oder_box{
    width: 100%;
    min-width: 1350px;
    .content_box{
      width: 87%;
      margin-left: 200px;
      .content{
        width: 100%;
        padding: 25px;
        box-sizing: border-box;
        background-color: #f2f2f2;
        .header_dingDan{
          width: 100%;
          height: 47px;
          line-height: 47px;
          display: flex;
          justify-content: space-between;
          padding: 0 25px;
          box-sizing: border-box;
          border-bottom: 1px solid #e4e4e4;
          background-color: white;
        }
        .content_itembox{
          width: 100%;
          background-color: white;
          padding: 0 25px;
          box-sizing: border-box;
          .content_itps{
            width: 100%;
            height: 48px;
            line-height: 48px;
            display: flex;
            justify-content: space-around;
            font-size: 14px;
            font-weight: bold;
            color: #909399;
            padding: 0 25px;
            box-sizing: border-box;
            border-bottom: 1px solid #EBEEF5;
            .content_itps_tit{
              width: 16%;
            }
            .content_itps_tit2{
              width: 21%;
            }
          }
          .content_item{
            width: 100%;
            height: 48px;
            line-height: 48px;
            display: flex;
            justify-content: space-around;
            font-size: 14px;
            padding: 0 25px;
            box-sizing: border-box;
            border-bottom: 1px solid #EBEEF5;
            color: #606266;
            .content_itemtit{
              width: 16%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              padding-right: 10px;
              box-sizing: border-box;
            }
            .content_itemtit2{
              width: 21%;
              .xiangQing{
                width: 56px;
                height: 28px;
                line-height: 28px;
                background-color: #409EFF;
                text-align: center;
                color: white;
                margin-top: 10px;
                border-radius: 5px;
                cursor: pointer;
              }
            }
          }
          .content_item:hover{
            background-color: #f2f2f2;
          }
        }
        .oder_fenye{
          width: 100%;
          display: flex;
          justify-content: center;
          padding: 25px 0;
          background-color: white;
        }
      }
    }
  }

</style>
